<template>
<div class="home-preview" :style='{"width":"100%","margin":"10px auto","flexWrap":"wrap","justifyContent":"space-between","display":"flex"}'>



<div class="recommend" :style='{"padding":"70px 0 10px","margin":"0","textAlign":"center","background":"url(http://codegen.caihongy.cn/20230217/7d76357613334628b7409c8212b24004.jpg) no-repeat center top / 100% 100%","flex":"1","width":"100%","position":"relative","order":"4"}'>
	<div v-if="false" class="idea recommendIdea" :style='{"padding":"0","flexWrap":"wrap","background":"none","justifyContent":"space-between","display":"flex"}'>
		<div class="box1" :style='{"width":"100%","background":"url(http://codegen.caihongy.cn/20230128/8ff79878bd0249ceb0ce5c2479e6212f.jpg) no-repeat center center","height":"200px"}'></div>
		<div class="box2" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box3" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box4" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>
	
    <div class="title" :style='{"minHeight":"50px","padding":"50px 0 20px","margin":"0px auto 0px","alignItems":"center","borderRadius":"0","textAlign":"left","background":"url(http://codegen.caihongy.cn/20230117/c7da2d80c94441d584aa6c41d0f7d72a.png) no-repeat 30% 60px,url(http://codegen.caihongy.cn/20230117/c7da2d80c94441d584aa6c41d0f7d72a.png) no-repeat 70% 60px,#fff","display":"flex","width":"86%","lineHeight":"40px","justifyContent":"center"}'>
		<span :style='{"width":"50%","fontSize":"30px","color":"#333","textAlign":"center","background":"none"}'>游玩项目推荐</span>
	</div>
	
	
	
	
	<!-- 样式三 -->
	<div class="list list3 index-pv1">
		<div :style='{"padding":"0","margin":"0 auto","borderColor":"#fff","borderRadius":"0 0 10px 10px","background":"#fff","borderWidth":"20px 40px 40px 40px","width":"86%","borderStyle":"solid","height":"auto"}' class="swiper-container" id="recommendyouwanxiangmu">
			<div class="swiper-wrapper">
				<div class="swiper-slide animation-box" :style='{"border":"0","cursor":"pointer","padding":"10px","borderRadius":"100% 100% 0 0","background":"none","width":"285px","fontSize":"0","position":"relative"}' v-for="(item,index) in youwanxiangmuRecommend" :key="index" @click="toDetail('youwanxiangmuDetail', item)">
					<img :name="item.id" :style='{"borderRadius":"100% 100% 0 0","width":"100%","height":"285px"}' v-if="preHttp(item.fengmian)" :src="item.fengmian.split(',')[0]" alt="" />
					<img :name="item.id" :style='{"borderRadius":"100% 100% 0 0","width":"100%","height":"285px"}' v-else :src="baseUrl + (item.fengmian?item.fengmian.split(',')[0]:'')" alt="" />
					<div class="line1" :style='{"width":"100%","padding":"0 0px","fontSize":"16px","lineHeight":"50px","color":"#fff","background":"#9f3731"}'>{{item.xiangmumingcheng}}</div>
				</div>
			</div>
			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
	
	
	
	
	
	
	
	<div @click="moreBtn('youwanxiangmu')" :style='{"border":"2px dashed #ccc","cursor":"pointer","padding":"0 20px","margin":"30px auto 40px","borderRadius":"30px","textAlign":"center","background":"#fff","display":"inline-block","width":"auto","lineHeight":"40px","minWidth":"120px"}'>
		<span :style='{"color":"#333","fontSize":"16px"}'>查看更多</span>
		<i v-if="true" :style='{"color":"#333","fontSize":"16px"}' class="el-icon-d-arrow-right"></i>
	</div>
	
</div>
<div class="recommend" :style='{"padding":"70px 0 10px","margin":"0","textAlign":"center","background":"url(http://codegen.caihongy.cn/20230217/7d76357613334628b7409c8212b24004.jpg) no-repeat center top / 100% 100%","flex":"1","width":"100%","position":"relative","order":"4"}'>
	<div v-if="false" class="idea recommendIdea" :style='{"padding":"0","flexWrap":"wrap","background":"none","justifyContent":"space-between","display":"flex"}'>
		<div class="box1" :style='{"width":"100%","background":"url(http://codegen.caihongy.cn/20230128/8ff79878bd0249ceb0ce5c2479e6212f.jpg) no-repeat center center","height":"200px"}'></div>
		<div class="box2" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box3" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box4" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>
	
    <div class="title" :style='{"minHeight":"50px","padding":"50px 0 20px","margin":"0px auto 0px","alignItems":"center","borderRadius":"0","textAlign":"left","background":"url(http://codegen.caihongy.cn/20230117/c7da2d80c94441d584aa6c41d0f7d72a.png) no-repeat 30% 60px,url(http://codegen.caihongy.cn/20230117/c7da2d80c94441d584aa6c41d0f7d72a.png) no-repeat 70% 60px,#fff","display":"flex","width":"86%","lineHeight":"40px","justifyContent":"center"}'>
		<span :style='{"width":"50%","fontSize":"30px","color":"#333","textAlign":"center","background":"none"}'>公园设施推荐</span>
	</div>
	
	
	
	
	<!-- 样式三 -->
	<div class="list list3 index-pv1">
		<div :style='{"padding":"0","margin":"0 auto","borderColor":"#fff","borderRadius":"0 0 10px 10px","background":"#fff","borderWidth":"20px 40px 40px 40px","width":"86%","borderStyle":"solid","height":"auto"}' class="swiper-container" id="recommendgongyuansheshi">
			<div class="swiper-wrapper">
				<div class="swiper-slide animation-box" :style='{"border":"0","cursor":"pointer","padding":"10px","borderRadius":"100% 100% 0 0","background":"none","width":"285px","fontSize":"0","position":"relative"}' v-for="(item,index) in gongyuansheshiRecommend" :key="index" @click="toDetail('gongyuansheshiDetail', item)">
					<img :name="item.id" :style='{"borderRadius":"100% 100% 0 0","width":"100%","height":"285px"}' v-if="preHttp(item.fengmian)" :src="item.fengmian.split(',')[0]" alt="" />
					<img :name="item.id" :style='{"borderRadius":"100% 100% 0 0","width":"100%","height":"285px"}' v-else :src="baseUrl + (item.fengmian?item.fengmian.split(',')[0]:'')" alt="" />
					<div class="line1" :style='{"width":"100%","padding":"0 0px","fontSize":"16px","lineHeight":"50px","color":"#fff","background":"#9f3731"}'>{{item.sheshimingcheng}}</div>
					<div class="line1" :style='{"width":"100%","padding":"0 0px","fontSize":"16px","lineHeight":"50px","color":"#fff","background":"#9f3731"}'>状态:{{item.zhuangtai}}</div>
				</div>
			</div>
			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
	
	
	
	
	
	
	
	<div @click="moreBtn('gongyuansheshi')" :style='{"border":"2px dashed #ccc","cursor":"pointer","padding":"0 20px","margin":"30px auto 40px","borderRadius":"30px","textAlign":"center","background":"#fff","display":"inline-block","width":"auto","lineHeight":"40px","minWidth":"120px"}'>
		<span :style='{"color":"#333","fontSize":"16px"}'>查看更多</span>
		<i v-if="true" :style='{"color":"#333","fontSize":"16px"}' class="el-icon-d-arrow-right"></i>
	</div>
	
</div>

	
<div class="news" :style='{"margin":"0 0 0","textAlign":"center","background":"none","display":"block","width":"100%","position":"relative","order":"10"}'>
	
	<div class="title" :style='{"margin":"40px auto 20px","alignItems":"center","background":"url(http://codegen.caihongy.cn/20230117/c7da2d80c94441d584aa6c41d0f7d72a.png) no-repeat 30% center,url(http://codegen.caihongy.cn/20230117/c7da2d80c94441d584aa6c41d0f7d72a.png) no-repeat 70% center","display":"flex","width":"100%","justifyContent":"center","height":"50px"}'>
		<span :style='{"width":"100%","fontSize":"30px","color":"#333","textAlign":"center","display":"inline-block","height":"50px"}'>公告信息</span>
	</div>
	
	
	
	
	
	
	
	
	<!-- 样式七 -->
	<div v-if="newsList.length" class="list list7 index-pv1" :style='{"padding":"10px","margin":"0 7%","textAlign":"left","flexWrap":"wrap","background":"none","display":"flex","width":"86%","justifyContent":"space-between","height":"auto"}'>
	  <div v-for="(item,index) in newsList" v-if="index<4" :key="index" @click="toDetail('newsDetail', item)" class="new7-list-item animation-box" style="cursor: pointer;" :style='{"cursor":"pointer","border":"1px solid #eee","width":"48%","margin":"0 0 40px","background":"#9f3731","height":"auto"}'>
	    <img :style='{"objectFit":"cover","width":"100%","height":"240px"}' style="box-sizing: border-box;object-fit: cover;width: 100%;height: 250px;" :src="baseUrl + item.picture">
	    <div :style='{"padding":"0 10px","whiteSpace":"nowrap","overflow":"hidden","color":"#fff","background":"none","fontSize":"16px","lineHeight":"40px","textOverflow":"ellipsis","fontWeight":"600"}' class="new7-list-item-title line1">{{ item.title }}</div>
	    <div :style='{"padding":"0 10px","overflow":"hidden","color":"#fff","fontSize":"14px","lineHeight":"24px","textIndent":"2em","height":"96px"}' class="new7-list-item-descript line1">{{ item.introduction }}</div>
	    <div :style='{"padding":"0 10px","fontSize":"14px","lineHeight":"32px","color":"#ccc","textAlign":"right"}' class="new7-list-item-time">{{ item.addtime.split(' ')[0] }}</div>
	    <div :style='{"width":"100%","padding":"0 10px","alignItems":"center","justifyContent":"space-between","display":"none","height":"auto"}'>
	      <div :style='{"color":"#666","fontSize":"14px","lineHeight":"24px"}'>新闻咨询</div>
	      <div :style='{"color":"#999","fontSize":"14px","lineHeight":"24px"}'>→</div>
	    </div>
	  </div>
	</div>
	
	
	
	
	<div @click="moreBtn('news')" :style='{"border":"2px dashed #ccc","cursor":"pointer","padding":"0 20px","margin":"0px auto 50px","borderRadius":"30px","textAlign":"center","background":"#fff","display":"inline-block","width":"auto","lineHeight":"40px","minWidth":"120px"}'>
		<span :style='{"color":"#333","fontSize":"16px"}'>查看更多</span>
		<i v-if="true" :style='{"color":"#333","fontSize":"16px"}' class="el-icon-d-arrow-right"></i>
	</div>
	
	<div v-if="true" class="idea newsIdea" :style='{"padding":"0","flexWrap":"wrap","background":"none","justifyContent":"space-between","display":"flex"}'>
		<div class="box1" :style='{"width":"100%","background":"url(http://codegen.caihongy.cn/20230217/1f25c2bc566b49c4959565f1941d60ee.jpg) no-repeat center top","height":"300px"}'></div>
		<div class="box2" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box3" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box4" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>
</div>


<div class="lists" :style='{"padding":"30px 0 0","margin":"0 auto","textAlign":"center","background":"none","width":"100%","position":"relative","order":"1"}'>
	
	<div class="title" :style='{"minHeight":"50px","margin":"0px auto 20px","alignItems":"center","background":"url(http://codegen.caihongy.cn/20230117/c7da2d80c94441d584aa6c41d0f7d72a.png) no-repeat 30% center,url(http://codegen.caihongy.cn/20230117/c7da2d80c94441d584aa6c41d0f7d72a.png) no-repeat 70% center","display":"flex","width":"100%","justifyContent":"center"}'>
	  <span :style='{"width":"100%","fontSize":"32px","lineHeight":"50px","color":"#111","textAlign":"center"}'>场地信息展示</span>
	</div>
	
	
	
	
	
	
	
	
	
	
	<!-- 样式九 -->
	<div class="list list9 index-pv1" :style='{"padding":"0","margin":"30px 7% 0","flexWrap":"wrap","background":"none","display":"flex","width":"86%","justifyContent":"space-between","height":"auto"}'>
		<div class="list-4-body" :style='{"width":"100%","margin":"0 0 20px","flexWrap":"wrap","justifyContent":"space-between","display":"flex","height":"auto"}'>
			<div v-if="changdixinxiList.length>0" @click="toDetail('changdixinxiDetail', changdixinxiList[0])" class="list-4-item animation-box item-1" :style='{"cursor":"pointer","margin":"0","borderRadius":"8px","display":"inline-block","width":"48%","position":"relative","height":"auto"}'>
				<img :style='{"width":"100%","objectFit":"cover","borderRadius":"8px 8px 0 0","float":"left","height":"285px"}' v-if="preHttp(changdixinxiList[0].changditupian)" :src="changdixinxiList[0].changditupian.split(',')[0]" alt="" />
				<img :style='{"width":"100%","objectFit":"cover","borderRadius":"8px 8px 0 0","float":"left","height":"285px"}' v-else :src="baseUrl + (changdixinxiList[0].changditupian?changdixinxiList[0].changditupian.split(',')[0]:'')" alt="" />
				<div class="list-4-item-title line1" :style='{"margin":"0 0 10px","whiteSpace":"nowrap","overflow":"hidden","color":"#fff","textAlign":"center","background":"#9f3731","width":"100%","lineHeight":"50px","fontSize":"16px","textOverflow":"ellipsis","height":"50px"}'>
                    <div>{{changdixinxiList[0].changdimingcheng}}</div>
                </div>
			</div>
			<div v-if="changdixinxiList.length>1" @click="toDetail('changdixinxiDetail', changdixinxiList[1])" class="list-4-item animation-box item-2" :style='{"cursor":"pointer","margin":"0","borderRadius":"8px","display":"inline-block","width":"48%","position":"relative","height":"auto"}'>
				<img :style='{"width":"100%","objectFit":"cover","borderRadius":"8px 8px 0 0","float":"left","height":"285px"}' v-if="preHttp(changdixinxiList[1].changditupian)" :src="changdixinxiList[1].changditupian.split(',')[0]" alt="" />
				<img :style='{"width":"100%","objectFit":"cover","borderRadius":"8px 8px 0 0","float":"left","height":"285px"}' v-else :src="baseUrl + (changdixinxiList[1].changditupian?changdixinxiList[1].changditupian.split(',')[0]:'')" alt="" />
				<div class="list-4-item-title line1" :style='{"margin":"0 0 10px","whiteSpace":"nowrap","overflow":"hidden","color":"#fff","textAlign":"center","background":"#9f3731","width":"100%","lineHeight":"50px","fontSize":"16px","textOverflow":"ellipsis","height":"50px"}'>
                    <div>{{changdixinxiList[1].changdimingcheng}}</div>
                </div>
			</div>
		</div>
		<div class="list-4-body" :style='{"width":"100%","flexWrap":"wrap","justifyContent":"space-between","display":"flex","height":"auto"}'>
			<div v-if="changdixinxiList.length>2" @click="toDetail('changdixinxiDetail', changdixinxiList[2])" class="list-4-item animation-box item-3" :style='{"cursor":"pointer","width":"48%","margin":"0","position":"relative","borderRadius":"8px","height":"auto"}'>
				<img :style='{"width":"100%","objectFit":"cover","borderRadius":"8px 8px 0 0","float":"left","height":"285px"}' v-if="preHttp(changdixinxiList[2].changditupian)" :src="changdixinxiList[2].changditupian.split(',')[0]" alt="" />
				<img :style='{"width":"100%","objectFit":"cover","borderRadius":"8px 8px 0 0","float":"left","height":"285px"}' v-else :src="baseUrl + (changdixinxiList[2].changditupian?changdixinxiList[2].changditupian.split(',')[0]:'')" alt="" />
				<div class="list-4-item-title line1" :style='{"margin":"0 0 10px","whiteSpace":"nowrap","overflow":"hidden","color":"#fff","textAlign":"center","background":"#9f3731","width":"100%","lineHeight":"50px","fontSize":"16px","textOverflow":"ellipsis","height":"50px"}'>
                    <div>{{changdixinxiList[2].changdimingcheng}}</div>
                </div>
			</div>
			<div v-if="changdixinxiList.length>3" @click="toDetail('changdixinxiDetail', changdixinxiList[3])" class="list-4-item animation-box item-4" :style='{"cursor":"pointer","width":"48%","margin":"0","position":"relative","borderRadius":"8px","height":"auto"}'>
				<img :style='{"width":"100%","objectFit":"cover","borderRadius":"8px 8px 0 0","float":"left","height":"285px"}' v-if="preHttp(changdixinxiList[3].changditupian)" :src="changdixinxiList[3].changditupian.split(',')[0]" alt="" />
				<img :style='{"width":"100%","objectFit":"cover","borderRadius":"8px 8px 0 0","float":"left","height":"285px"}' v-else :src="baseUrl + (changdixinxiList[3].changditupian?changdixinxiList[3].changditupian.split(',')[0]:'')" alt="" />
				<div class="list-4-item-title line1" :style='{"margin":"0 0 10px","whiteSpace":"nowrap","overflow":"hidden","color":"#fff","textAlign":"center","background":"#9f3731","width":"100%","lineHeight":"50px","fontSize":"18px","textOverflow":"ellipsis","height":"50px"}'>
                    <div>{{changdixinxiList[3].changdimingcheng}}</div>
                </div>
			</div>
			<div v-if="changdixinxiList.length>4" @click="toDetail('changdixinxiDetail', changdixinxiList[4])" class="list-4-item animation-box item-5" :style='{"width":"390px","margin":"0 10px","position":"relative","display":"none","height":"400px"}'>
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-if="preHttp(changdixinxiList[4].changditupian)" :src="changdixinxiList[4].changditupian.split(',')[0]" alt="" />
				<img :style='{"width":"100%","objectFit":"cover","float":"left","height":"100%"}' v-else :src="baseUrl + (changdixinxiList[4].changditupian?changdixinxiList[4].changditupian.split(',')[0]:'')" alt="" />
				<div class="list-4-item-title line1" :style='{"color":"#fff","left":"0","textAlign":"center","bottom":"0","background":"rgba(0,0,0,.3)","width":"100%","lineHeight":"44px","fontSize":"18px","position":"absolute"}'>
                    <div>{{changdixinxiList[4].changdimingcheng}}</div>
                </div>
			</div>
		</div>
	</div>
	
	<div @click="moreBtn('changdixinxi')" :style='{"border":"2px dashed #ccc","cursor":"pointer","padding":"0 20px","margin":"40px auto 50px","borderRadius":"30px","textAlign":"center","background":"#fff","display":"inline-block","width":"auto","lineHeight":"40px","minWidth":"120px"}'>
		<span :style='{"color":"#333","fontSize":"16px"}'>查看更多</span>
		<i v-if="true" :style='{"color":"#333","fontSize":"16px"}' class="el-icon-d-arrow-right"></i>
	</div>
	
	<div v-if="false" class="idea" :style='{"padding":"0","flexWrap":"wrap","background":"none","justifyContent":"space-between","display":"flex"}'>
		<div class="box1" :style='{"width":"100%","background":"url(http://codegen.caihongy.cn/20230128/a8d21cd575c84387a6bc6cc22d354c03.jpg) no-repeat center top","height":"200px"}'></div>
		<div class="box2" :style='{"width":"00%","background":"#fff","height":"80px"}'></div>
		<div class="box3" :style='{"width":"00%","background":"#fff","height":"80px"}'></div>
		<div class="box4" :style='{"width":"00%","background":"#fff","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>

</div>


</div>
</template>

<script>
  export default {
    //数据集合
    data() {
      return {
        baseUrl: '',
        newsList: [],
        youwanxiangmuRecommend: [],
        gongyuansheshiRecommend: [],

        changdixinxiList: [],
      }
    },
    created() {
      this.baseUrl = this.$config.baseUrl;
      this.getNewsList();
      this.getList();
    },
    //方法集合
    methods: {
      preHttp(str) {
          return str && str.substr(0,4)=='http';
      },
		getNewsList() {
			this.$http.get('news/list', {params: {
				page: 1,
				limit: 4,
			order: 'desc'}}).then(res => {
				if (res.data.code == 0) {
					this.newsList = res.data.data.list;
					
					
				}
			});
		},
		getList() {
          let autoSortUrl = "";
          autoSortUrl = "youwanxiangmu/autoSort";
			this.$http.get(autoSortUrl, {params: {
				page: 1,
				limit: 6,
			}}).then(res => {
				if (res.data.code == 0) {
					this.youwanxiangmuRecommend = res.data.data.list;
					
					let options = {"observer":true,"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"observeParents":true,"loop":true,"slidesPerView":"4","speed":600,"spaceBetween":20,"autoplay":{"delay":"6000","disableOnInteraction":false}}
					options.pagination = {el:'null'}
					if(options.slidesPerView) {
						options.slidesPerView = Number(options.slidesPerView);
					}
					if(options.spaceBetween) {
						options.spaceBetween = Number(options.spaceBetween);
					}
					this.$nextTick(() => {
						new Swiper('#recommendyouwanxiangmu', options)
					})
					
					// 商品列表样式五
					
				}
			});
          autoSortUrl = "gongyuansheshi/autoSort";
			this.$http.get(autoSortUrl, {params: {
				page: 1,
				limit: 6,
			}}).then(res => {
				if (res.data.code == 0) {
					this.gongyuansheshiRecommend = res.data.data.list;
					
					let options = {"observer":true,"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"observeParents":true,"loop":true,"slidesPerView":"4","speed":600,"spaceBetween":20,"autoplay":{"delay":"6000","disableOnInteraction":false}}
					options.pagination = {el:'null'}
					if(options.slidesPerView) {
						options.slidesPerView = Number(options.slidesPerView);
					}
					if(options.spaceBetween) {
						options.spaceBetween = Number(options.spaceBetween);
					}
					this.$nextTick(() => {
						new Swiper('#recommendgongyuansheshi', options)
					})
					
					// 商品列表样式五
					
				}
			});
			
			this.$http.get('changdixinxi/list', {params: {
				page: 1,
				limit: 4,
			}}).then(res => {
				if (res.data.code == 0) {
					this.changdixinxiList = res.data.data.list;
					
					// 商品列表样式五
					
				}
			});
		},
		toDetail(path, item) {
			this.$router.push({path: '/index/' + path, query: {detailObj: JSON.stringify(item)}});
		},
		moreBtn(path) {
			this.$router.push({path: '/index/' + path});
		}
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.home-preview {
	
		.recommend {
			.list3 .swiper-button-prev {
				padding: 30px 20px;
				left: 10px;
				background: #ba1f26;
				right: auto;
			}
			
			.list3 .swiper-button-prev::after {
				color: #fff;
			}
			
			.list3 .swiper-button-next {
				padding: 30px 20px;
				left: auto;
				background: #ba1f26;
				right: 10px;
			}
			
			.list3 .swiper-button-next::after {
				color: #fff;
			}
			
			.list5 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list5 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
        }
        
        .list5 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list5 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 {
				.swiper-slide-prev {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-next {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-active {
					position: relative;
					z-index: 5;
				}
			}
			
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				transform: scale(1);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				-webkit-perspective: 1000px;
				perspective: 1000px;
				opacity: 0.75;
				transition: 0.3s;
			}
		}
		
		.news {
			.list3 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list3 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list3 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list3 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list6 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list6 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list6 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list6 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				transform: rotate(00deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				opacity: 0.75;
				transition: 0.3s;
			}
		}
	
		.lists {
			.list3 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list3 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list3 .swiper-button-next {
				left: auto;
				right: 10px;
        }
        
        .list3 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list5 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 .swiper-button-next {
            left: auto;
            right: 10px;
			}
			
			.list5 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 {
				.swiper-slide-prev {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-next {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-active {
					position: relative;
					z-index: 5;
				}
			}
			
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				-webkit-perspective: 1000px;
				perspective: 1000px;
				opacity: 0.75;
				transition: 0.3s;
			}
		}
	}
</style>
